<template>
  <svg :style="getStyle" aria-hidden="true">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script setup lang="ts" name="Icon">
import { computed } from "vue";

const props = defineProps({
  icon: {
    type: String
  },
  prefix: {
    type: String,
    default: "icon"
  },
  color: {
    type: String
  },
  size: {
    type: String,
    default: "16px"
  }
});

const symbolId = computed(() => `#${props.prefix}-${props.icon}`);

const getStyle = computed(() => {
  return {
    width: props.size,
    height: props.size,
    fill: "currentColor",
    color: props.color
  };
});
</script>
